<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.big{
		width:480px;
		height:360px;
		background-color:red;
		overflow:hidden;
		position:relative;
	}

	img{
		width:600px;
		height:480px;
		position:absolute;
		left:-100px;
		transition:all 0.2s;
	}

	.big:hover img{
		left:0px;
	}

	.big:hover .font{
		bottom:80px;
	}

	.big .font{
		position:absolute;
		bottom:50px;
		left:30px;
		font-size:35px;
		color:white;
		transition:all 0.2s;
	}

	.big .xfont{
		position:absolute;
		bottom:30px;
		left:30px;
		font-size:12px;
		color:white;
		transition:all 0.2s;
		opacity:0;
	}

	.big:hover .xfont{
		bottom:60px;
		opacity:1;
		transition:all 0.4s 0.1s;
	}

</style>

<body>
	<div class="big">
		<img src="img/7.jpg" alt="">
		<div class="font">NICE <b>LILY</b></div>
		<p class="xfont">LILY LIKES TO PLAY WITH CRAYONS AND PENCILS</p>
	</div>
</body>
</html>